<template>
    <div class="app-container calendar-list-container">
        <div class="filter-container justify-between">
            <div>
            </div>
            <div>
                <el-input @keyup.enter.native="doSearch" style="width: 200px;" class="filter-item" placeholder="输入名称搜索"
                          v-model="listQuery.keyword">
                </el-input>
                <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="doSearch">搜索
                </el-button>
            </div>
        </div>
        <el-table  ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="给我一点时间"
                   border fit highlight-current-row style="width: 100%"  @selection-change="onSelectionChange"  height="500">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column align="left"  label="岗位名">
                <template slot-scope="scope">
                    <span>{{scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left"  label="单位名">
                <template slot-scope="scope">
                    <span>{{scope.row.dept_name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left"  label="面试配置" >
                <template slot-scope="scope">
                    <span v-if="scope.row.interviews&&scope.row.interviews!='null'"> {{scope.row.interviews.split(',').length}}位面试官</span>
                    <span v-else>未配置</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="操作" class-name="small-padding fixed-width" fixed="right" width="500">
                <template slot-scope="scope">
                    <el-button round size="mini" type="primary" @click="showWin(scope.row.id)"  >面试配置</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="onSizeChange" @current-change="onCurrentChange"
                           :current-page="listQuery.pageNumber" :page-sizes="[12,50,100,10000]" :page-size="listQuery.pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="面试配置" :visible.sync="dialogWinVisible">
            <el-form  :model="bean" label-position="right" label-width="120px" style='width: 400px; margin-left:50px;'>
                <template>
                    <el-form-item  label="岗位名" prop="name">
                        <el-input v-model="bean.name" placeholder="输入岗位名" disabled></el-input>
                    </el-form-item>
                    <el-form-item  :label="'第'+(index+1)+'次面试'" v-for="interview,index in bean.interview_list">
                        <el-input v-model="interview.interview_name" placeholder="选择面试官" @click.native="showChooseWin(interview.id,bean.interview_step_list[index],index)"></el-input>
                        <el-button type="danger" size="mini" v-if="(parseInt(index)+1)==bean.interview_list.length" @click="deleteInterviewer">删除</el-button>
                    </el-form-item>
                    <div class="form-group ">
                        <div class="col-sm-12 text-center">
                            <el-button type="primary" class="add-interview-btn" @click="addInterviewer">添加面试官</el-button>
                            <div style="margin-top:4px;color:#1296db;font-size:12px;line-height:1.8;text-align:center;">如需面试模块，需提前配置面试官</div>
                        </div>
                    </div>
                </template>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveBean" :loading="dealing">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="配置面试项" :visible.sync="dialogChooseVisible" style="">
            <el-row :gutter="20" class="el_row_mianshi">
                <el-col :span="6" >
                    <div class="title">单位列表</div>
                    <el-radio-group style="height:360px;overflow-y: scroll;" v-model="chooseBean.dept">
                        <el-radio border  label="全部单位" style="margin-top:4px;width:100%;diplay:block;">全部单位</el-radio>
                        <el-radio border :label="item.id" v-for="item in chooseBean.dept_list"  style="margin-top:4px;width:100%;diplay:block;margin-left:0;">{{item.name}}</el-radio>
                    </el-radio-group>
                </el-col>
                <el-col :span="6">
                    <div class="title">面试官列表</div>
                    <el-radio-group style="height:360px;overflow-y: scroll;" v-model="chooseBean.interview.id" @change="changeInterviewer">
                        <el-radio v-if="chooseBean.dept=='全部单位'||item.dept_id==chooseBean.dept" border :label="item.id"
                                  v-for="item in chooseBean.interview_list"  style="margin-top:4px;width:100%;diplay:block;margin-left:0;">
                            {{item.interview_name}}
                        </el-radio>
                    </el-radio-group>
                </el-col>
                <el-col :span="12">
                    <div class="title">面试维度列表</div>
                    <div style="font-weight:bold;text-align:right;line-height:1.6;margin-top:6px;">合计分值： {{chooseBean.total_score}}</div>
                    <div style="text-align:right;">
                        标准分:<el-input size="mini" v-model="chooseBean.biaozhun_score" placeholder="输入标准分" style="display:inline-block;width:24%;"></el-input>
                        及格分:<el-input size="mini" v-model="chooseBean.jige_score" placeholder="输入及格分" style="display:inline-block;width:24%;"></el-input>
                    </div>
                    <el-checkbox-group  style="height:300px;overflow-y: scroll;margin-top:10px;" v-model="chooseBean.option_id_list" @change="optionsChange">
                        <el-row v-for="item,index in chooseBean.option_list">
                            <el-col :span="12">
                                <el-checkbox  :label="item.id"   style="line-height:36px;margin-top:4px;width:100%;diplay:block;margin-left:0;">{{item.name}}
                                   </el-checkbox>
                            </el-col>
                            <el-col :span="12" style="text-align:right;">
                                <span style="font-size: 14px;">分值：</span><el-input  v-model="item.score" placeholder="输入分值" @change="changeScore(item.score,index)"
                                    style="width:120px;">
                                </el-input>
                            </el-col>
                        </el-row>

                    </el-checkbox-group>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveInterviewOption" >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
	import Vue from 'vue'
	import waves from '@/directive/waves' // 水波纹指令
	import API from '@/api'
	import Http from '@/http'
	import Store from '@/store'
	import Msg from '@/utils/msg'
	import Utils from '@/utils/common'
	import {mapGetters} from 'vuex'
	import _ from 'underscore'
	import Qiniu from '@/utils/qiniu'

	export default {
		directives: {waves},
		data() {
			return {
				dealing: false,
				list: [],
				total: 0,
				listLoading: true,
				listQuery: {
					pageNumber: 1,
					pageSize: 12,
					keyword: '',
					status: ''
				},
				bean:{
				},
				chooseBean:{
					interview:{}
                },
				multipleSelection: [],
				dialogWinVisible:false,
				dialogChooseVisible:false,
				onChangeInterviewIndex:0,
                interviewOptionsList:[]
			}
		},
		filters: {},
		components: {},
		created() {
			this.loadList()
		},
		computed: {
			...mapGetters([
				'company'
			]),
		},
        mounted(){
        },
		methods: {
			loadList() {
				this.listLoading = true
				Http.getModel(API.get_job_list, this.listQuery, false).then((json) => {
					if (json.code == 0) {
						var list = json.data.list
						list.forEach(function(item){
							item.ext_info_obj = JSON.parse(item.ext_info)
						})
						this.list = list
						this.total = parseInt(json.data.total)
						this.listLoading = false
					}
				})
			},
			addInterviewer(){
				var leng = this.bean.interview_list.length
				if(leng==0||this.bean.interview_list[leng-1].id){
					this.bean.interview_list.push({})
                }else{
                    Msg.error("请先完善上个面试官！")
                }
            },
			deleteInterviewer(){
				this.bean.interview_list.pop()
            },
			changeScore(val,index){
				if(!val){
					Msg.error("请填写正确的分值！")
                }
                if(this.chooseBean.option_id_list.indexOf(this.chooseBean.option_list[index].id)!=-1){
					this.chooseBean.total_score = 0
					for(let i=0;i<this.chooseBean.option_id_list.length;i++){
						for(let j=0;j<this.chooseBean.option_list.length;j++){
							if(this.chooseBean.option_id_list[i] == this.chooseBean.option_list[j].id){
								this.chooseBean.total_score += parseInt(this.chooseBean.option_list[j].score)
							}
						}
                    }
                }
            },
			optionsChange(val){
				this.chooseBean.total_score = 0
				for(let i=0;i<this.chooseBean.option_id_list.length;i++){
					for(let j=0;j<this.chooseBean.option_list.length;j++){
						if(this.chooseBean.option_id_list[i] == this.chooseBean.option_list[j].id){
							this.chooseBean.total_score += parseInt(this.chooseBean.option_list[j].score)
						}
					}
				}
            },
			changeInterviewer(){
				for(let j=0;j<this.chooseBean.interview_list.length;j++){
					if(this.chooseBean.interview_list[j].id == this.chooseBean.interview.id){
						this.chooseBean.interview.interview_name = this.chooseBean.interview_list[j].interview_name
					}
				}
            },
			saveInterviewOption(){
                if(this.chooseBean.interview.id){
                	var interview_text = ''
                    var options_list = []
					for(let i=0;i<this.chooseBean.option_id_list.length;i++){
						for(let j=0;j<this.chooseBean.option_list.length;j++){
							if(this.chooseBean.option_id_list[i] == this.chooseBean.option_list[j].id){
								interview_text+=(this.chooseBean.option_list[j].id+':'+this.chooseBean.option_list[j].score+'&');
								options_list.push({option_id:this.chooseBean.option_list[j].id,max_val:this.chooseBean.option_list[j].score})
							}
						}
					}
					interview_text = interview_text.substr(0,interview_text.length-1)
                    this.interviewOptionsList[this.onChangeInterviewIndex] = {
                    	name : this.chooseBean.interview.interview_name,
                        id:this.chooseBean.interview.id,
						biaozhun_score:this.chooseBean.biaozhun_score,
						jige_score:this.chooseBean.jige_score,
						options_list:options_list,
                        interview_options_text:this.chooseBean.interview.id+'|'+interview_text+'|'+(this.onChangeInterviewIndex+1)+'#'+
                        this.chooseBean.biaozhun_score+'&'+this.chooseBean.jige_score
                    }
                    console.log("this.chooseBean.interview.interview_name:",this.chooseBean.interview.interview_name)
					this.bean.interview_list[this.onChangeInterviewIndex] = {
						interview_name:this.chooseBean.interview.interview_name,
                        id:this.chooseBean.interview.id,
                    }
                    this.chooseBean = {
						interview:{}
                    }
                    this.dialogChooseVisible = false
                }else{
                	Msg.error('请选择面试官！')
                }
            },
			showChooseWin(interview_id,interview_options,index){
				var that = this
				this.dialogChooseVisible = true
                this.onChangeInterviewIndex = index // 正在修改第几项
                if(interview_id){
					Http.getModel(API.get_interview, {id: interview_id}, false).then((json) => {
						if (json.code == 0) {
							var interview = json.data;
							openChooseInterview(interview, interview_id,interview_options);
						}
					})
                }else{
					openChooseInterview({});
                }
				//选择面试官
				function openChooseInterview(interview, interview_id,interview_options){
					var interviewId = interview_id;
					var interviewOptions = interview_options;
					var options = [];
					var result = {};
					if(that.interviewOptionsList[that.onChangeInterviewIndex]){
						result = {
							biaozhun_score:that.interviewOptionsList[that.onChangeInterviewIndex].biaozhun_score,
							jige_score:that.interviewOptionsList[that.onChangeInterviewIndex].jige_score
                        }
                        options = that.interviewOptionsList[that.onChangeInterviewIndex].options_list
                    }else if (interviewId && interviewOptions) {
						result = getOptionsByInterviewId(interviewId, interviewOptions);
						options = result["list"];
					}

					Http.getModel(API.get_depts_and_options, {}, false).then((json) => {
						if (json.code == 0) {
							var dept_list = json.data.dept_list;
							var option_list = json.data.option_list;
							var interview_list = json.data.interview_list;
							var option_id_list = []
                            var total_score = 0;
							for(let j=0;j<option_list.length;j++){
								option_list[j].score =10
							}
							if(options.length){
								for(let i=0;i<option_list.length;i++){
									for(let j=0;j<options.length;j++){
										if(option_list[i].id == options[j].option_id){
											option_list[i].score = options[j].max_val
                                        }
                                    }
                                }
								for(let j=0;j<options.length;j++){
									option_id_list.push(options[j].option_id)
									total_score+=parseInt(options[j].max_val)
								}
                            }
							that.chooseBean = {
								interview: interview,
								option_id_list: option_id_list,
								biaozhun_score: result.biaozhun_score || 0,
								jige_score: result.jige_score || 0,
                                total_score:total_score,
                                dept:interview.dept_id||'全部单位',
								dept_list: dept_list,
								option_list: option_list,
								interview_list: interview_list
                            }
						}
					})
					function getOptionsByInterviewId(interviewId, interviewOptions) {
						interviewOptions = interviewOptions.split(",");
						var result = [];
						var option_list = [];
						var biaozhun_score = 0;
						var jige_score = 0;
						for (var i = 0; i < interviewOptions.length; i++) {
							var ar = interviewOptions[i].split("#");
							var interviewOptionsStr = ar[0];
							var score_str = ar[1];
							if (score_str) {
								var score_arr = score_str.split("&");
								biaozhun_score = score_arr[0] || 0;
								jige_score = score_arr[1] || 0;
							}
							var arr = interviewOptionsStr.split("|");
							if (arr[0] == interviewId) {
								console.log("### arr:", arr);
								option_list = arr[1].split("$");
								break;
							}
						}
						for (var k = 0; k < option_list.length; k++) {
							var temp = option_list[k].split(":");
							result.push({
								option_id: temp[0],
								max_val: temp[1]
							});
						}
						return {"list": result, "biaozhun_score": biaozhun_score, "jige_score": jige_score};
					}
				}
            },
			showWin(id) {
                this.dialogWinVisible = true
				this.loadBean(id)
			},
			loadBean(id) {
				Http.getModel(API.get_dept_list, {pageSize: 10000}).then((json) => {
					if (json.code == 0) {
						var dept_list = json.data.list;
						Http.getModel(API.get_job, {id: id}).then((json) => {
							if (json.code == 0) {
								var bean = json.data;
								bean.dept_list = dept_list;
								if (bean.interviews) {
									bean.interview_list = sortByStep(bean.interviews, bean.interview_list);
								}else{
									bean.interview_list = []
                                }
								if (bean.interview_options) {
									bean.interview_step_list = bean.interview_options.split(",");
								}else{
									bean.interview_step_list = []
                                }
								this.bean = bean
							}
						})
					}
				})
				function sortByStep(interviews, interview_list) {
					var interview_ids = interviews.split(",");
					var result = [];
					for (var i = 0; i < interview_ids.length; i++) {
						result.push(getInterviewById(interview_ids[i], interview_list));
					}
					return result;
				}

				function getInterviewById(id, interview_list) {
					var result = null;
					for (var i = 0; i < interview_list.length; i++) {
						if (interview_list[i].id == id) {
							result = interview_list[i];
							break;
						}
					}
					return result;
				}
			},
			saveBean(){

                var leng = this.bean.interview_list.length;
                var interviews = ''
                var interview = ''
                var interview_options_arr = this.bean.interview_options.split(",")
                for(var i=0;i<leng;i++){
					interviews += this.bean.interview_list[i].id+','
					interview += this.bean.interview_list[i].interview_name+','
                    if(this.interviewOptionsList[i]){
						interview_options_arr[i] = this.interviewOptionsList[i].interview_options_text
                    }
                }
                var params = {
                	id:this.bean.id,
					interviews:interviews.substr(0,interviews.length-1),
					interview_options:interview_options_arr.join(),
					interview:interview.substr(0,interview.length-1)
                }
				Http.getModel(API.save_job, params).then((json) => {
					if (json.code == 0) {
						Msg.success("保存成功！",()=>{
							this.dialogWinVisible = false
							this.onChangeInterviewIndex = 0
							this.interviewOptionsList = []
							this.loadList()
                        })
					}
				})
            },
			/***   公用部分 start ***/
			onSelectionChange(val) {
				this.multipleSelection = val;
			},
			doSearch() {
				this.listQuery.page = 1
				this.loadList()
			},
			onSizeChange(val) {
				this.listQuery.pageSize = val
				this.loadList()
			},
			onCurrentChange(val) {
				this.listQuery.pageNumber = val
				this.loadList()
			},
			/***   公用部分 end ***/
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .el-dialog{
        height:500px;
    }
    .el_row_mianshi{
        .title{
            font-size: 14px;
            background: #999;
            color: white;
            line-height: 36px;
            padding-left: 5px;
        }
    }
</style>
